import type {ActionType, ProColumns} from '@ant-design/pro-components';
import {
  PageContainer,
  ProTable,
} from '@ant-design/pro-components';
import {Button} from 'antd';
import React, {useRef} from 'react';
import {listOnlineInterfaceInfoByPage} from "@/services/zoffyApi/interfaceInfoController";
import {grantInterface} from "@/services/zoffyApi/userInterfaceController";
import message from "antd/es/message";

const Store: React.FC = () => {
  /**
   * @en-US Pop-up window of new window
   * @zh-CN 新建窗口的弹窗
   *  */
  /**
   * @en-US The pop-up window of the distribution update window
   * @zh-CN 分布更新窗口的弹窗
   * */
  const actionRef = useRef<ActionType>();

  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */
  const grantInterfaceById=async (id:string)=>{
    const res=await grantInterface({
      id: id
    })
    if(!res.data){
      message.error("开通失败");
      return
    }
    message.success("开通成功，可调用次数+100")
  };
  const columns: ProColumns<API.InterfaceInfoVo>[] = [

    {
      title: '接口名称',
      dataIndex: 'name',
      valueType: "text",
    },
    {
      title: '描述',
      dataIndex: 'description',
      valueType: 'textarea',
      hideInSearch: true,
    },


    {
      title: '操作',
      valueType: 'option',
      render: (_, record) => [
        <Button
          onClick={()=>{
            grantInterfaceById(record?.id || "");
          }}
        >
          开通接口
        </Button>
      ],
    },
  ];
  return (
    <PageContainer>
      <ProTable<API.InterfaceInfoVo, API.InterfaceInfoQueryRequest>
        headerTitle={'API商店'}
        params={{
          pageSize: 10,

        }}
        pagination={
          {
            pageSize: 10,
          }
        }
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}

        //@ts-ignore
        request={
          async (params: any) => {
            const res = await listOnlineInterfaceInfoByPage({
              ...params,
              page: params.current,
            })
            if (res?.data) {
              return {
                data: res?.data?.records || [],
                success: true,
                total: res.data.total,
              }
            }
            return {};
          }}
        columns={columns}

      />


    </PageContainer>
  );
};
export default Store;
